<template  >
  <h1>医生界面</h1>

  <!-- 查看病史弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="SicknessVisible"
      :before-close="SicknessClose"
      style="width: 1000px; max-height: 600px; overflow-y: auto; text-align: center;"
  >
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; width: 100%;">
      <div
          v-for="(item, index) in limitedSicknessFrom"
          :key="index"
          style="width: 90%; text-align: left; padding: 20px; border: 1px solid #eee; font-size: 14px; font-weight: bold;"
      >
          <p style="font-weight: bold;">就诊时间: {{ item.treatTime }}</p>
          <p style="font-weight: bold;">就诊病情: {{ item.illness }}</p>
          <p>病情描述: {{ item.description }}</p>
          <img v-if="item.avatar" :src="'item.avatar'" style="width: 100%; max-height: 200px; object-fit: cover; margin-top: 20px;" alt="患者影像">
          <p style="font-weight: bold;">医嘱: {{ item.orders }}</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="SicknessClose">取消</el-button>
      <el-button type="primary" >打印病史</el-button>
    </template>
  </el-dialog>
    <!-- 医生诊断搜索卡片 -->
    <el-card  style="margin: 20px;
      margin-left: 105px; height:70px">
      <el-form :inline="true" >
        <el-row :gutter="10" align="middle">
          <el-col :span="10">
            <el-form-item label="患者名称：">
              <el-input placeholder="请输入" v-model="searchRegisteredFormData.patientName" style="width: 164px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="挂号时间：" >
              <el-date-picker
                  v-model="searchRegisteredFormData.makeTime"
                  type="datetime"
                  placeholder="年/月/日"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  format="YYYY-MM-DD HH:mm:ss"
                  style="width: 204px"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button  style="width: 68px;" color="rgb(0,150,132)"  @click="searchRegisteredForm">
                <el-icon style="width: 16px;height: 16px;color: white"><Search /></el-icon>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>


    <!--诊断患者的列表  -->
    <el-card style="margin: 20px; margin-left: 105px; ">

      <el-table :data="registeredData"  >
        <el-table-column label="序号" prop="index" align="center" width="103px"  type="index" ></el-table-column>
        <el-table-column label="患者名称" prop="patientName" align="center" width="285px"></el-table-column>
        <el-table-column label="挂号时间" prop="makeTime" align="center" width="294px"></el-table-column>
        <el-table-column label="操作"  align="center" width="144px" style="collapse: 2" >
          <template #default="scope">
            <el-row :gutter="10">
              <el-col :span="11">
                <el-button type="primary" style="width: 53px;height: 25px" color="rgb(0,150,132)"    >就医</el-button>
              </el-col>
              <el-col :span="13">
                <el-button type="primary" style="width: 59px;height: 25px" color="rgb(0,150,132)"   >查看病史</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

<!--就医弹窗-->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input  v-model="savePatientForm.cardId"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="患者名称">
            <el-input v-model="savePatientForm.patientName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="患者年龄">
            <el-input  v-model="savePatientForm.age"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="savePatientForm.gender">
              <el-radio border label="男" value="1" style="margin: 0;"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="患者描述">
            <el-input v-model="savePatientForm.patientDescription"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="确诊病情">
            <el-input v-model="savePatientForm.illness"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="病情描述">
            <el-input v-model="savePatientForm.description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="savePatient">保存</el-button>
    </template>
  </el-dialog>
</template>



<script setup>
import {ref,onMounted,computed} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
//定义一个医生Id变量，获取登录的医生Id信息
var doctorId=getUser().id
// var doctorId=301 //测试代码
//定义一个搜索框数据变量
const searchRegisteredFormData=ref({
  patientName:"",makeTime:""
});
//定义一个存储患者列表的变量
const registeredData=ref([
  //{id:"",patientName:"张三",makeTime:"2205-05-27"}
]);
//页面自动加载时，加载医生id对应的患者列表
onMounted(()=>{ loadRegistered()});
//定义一个方法加载医生id对应的挂号单
const loadRegistered=(data)=>{
  axios.get(BASE_URL+"/v1/registered/selectByDoctorId?"+data+"&doctorId="+doctorId).then((response)=>{
    if (response.data.code==2000){
      registeredData.value=response.data.data;
      ElMessage.success("查询成功")
    }else {
      ElMessage.error(response.data.msg);
    }
    searchRegisteredFormData.value={patientName:"",makeTime:""}
  })
}
//定义关闭方法
const handleClose = () => {
  if(confirm('您确认要关闭弹窗吗?')){
    //关闭弹窗
    dialogVisible.value = false;
    //并且清空表单数据
    savePatientForm.value = {};
  }
}



//定义对象搜索条件
const searchPatientFrom =ref({
  patientName:'',
  makeTime:''
});
//定义重置的方法
const resetSearch = ()=>{
  selectPatient();
};

//定义搜索患者的方法
const selectPatient = () => {
  let data = qs.stringify(searchPatientFrom.value);
  console.log(data)
  axios.get(BASE_URL+'/v1/doctor/selectPatient?'+data).then((response)=>{
    if(response.data.code==2000){
      patientArr.value = response.data.data;
      console.log(patientArr.value);
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义数组用来加载患者的数据
const patientArr =ref([]);
//定义加载的方法
onMounted(()=>{
  selectPatient();
})
//定义就诊的方法
const medicalTreatment =(id)=>{
  dialogTitle.value="就医"
  dialogVisible.value=true;
}
//定义一个方法，查询搜索表单中的内容
const searchRegisteredForm=()=>{
  var data=qs.stringify(searchRegisteredFormData.value);
  loadRegistered(data);
}

//控制病史弹窗是否显示
const SicknessVisible = ref(false);
//控制病史弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制弹窗的标题
const dialogTitle = ref('查看病史');
//用来保存病史的数据
const sicknessFrom =ref([])

//定义查看病史的方法
const selectSickness = (id)=>{
  console.log(id)
  SicknessVisible.value = true;
  dialogTitle.value = '查看病史';
  axios.get(BASE_URL+'/v1/doctor/selectMedical/'+id).then((response)=>{
    if (response.data.code==2000){
      sicknessFrom.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

//定义处理弹窗关闭的方法
const SicknessClose = ()=>{
  if(confirm('是否关闭本弹窗？')){
    SicknessVisible.value = false;
  }
}

// 创建一个计算属性，用于获取 sicknessFrom 数组中的最后两个元素
const limitedSicknessFrom = computed(() => {
  // 检查数组长度以避免在数组长度小于2时出错
  if (sicknessFrom.value.length < 2) {
    // 可以选择返回一个空数组、null 或其他默认值
    return sicknessFrom.value;
  }
  return sicknessFrom.value.slice(-2); // 使用负数索引从数组末尾开始切片
});



</script>


<style scoped>

</style>